<template>
  <div class="home">
    <div class="banner"></div>
    <div class="news">
      <div class="title">
        <h2>新闻公告</h2>
        <span></span>
      </div>
      <div class="news-box">
        <swiper class="news-left" :options="newsSwiper">
          <swiper-slide><img src="../assets/images/bgimg.jpg" width="570px" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/images/bgimg.jpg" width="570px" alt=""></swiper-slide>
          <swiper-slide><img src="../assets/images/bgimg.jpg" width="570px" alt=""></swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>

        <div class="news-right">
          <div class="news-title">
            <h5 :class="[newsIndex==index?'activeTit':'']" v-for="(item,index) in 2" :key="index" @mouseenter="newsTab(index)"> {{ index===0?'新闻':'公告'  }} </h5>
            <router-link to="/news">更多》</router-link>
          </div>
          <ul :class="[newsIndex==index?'activeCont':'']" v-for="(item,index) in 2" :key="index">
            <li>
              <p>张吉福在我市调研文化遗产保护利用和文化事业产业发展工作</p><span>2023-04</span>
            </li>
            <li>
              <p>第二届大学生乡村振兴（阳泉）建筑（闲置空间）创意设计大赛颁奖仪式在清华大学举办</p><span>2023-04</span>
            </li>
            <li>
              <p>实施红色领航战略 增进文化自信自强</p><span>2023-04</span>
            </li>
            <li>
              <p>大宗旅游接待奖励政策激活旅游市场</p><span>2023-04</span>
            </li>
            <li>
              <p>我市乡村旅游再添“国”字号招牌</p><span>2023-03</span>
            </li>
            <li>
              <p>七方面发力 山西文化旅游启新局</p><span>2023-02</span>
            </li>
          </ul>

        </div>
      </div>
    </div>
    <div class="scenic">
      <div class="title">
        <h2>热门景点</h2>
        <span></span>
      </div>
      <div class="scenic-box">
        <div :class="['panel',panelsIndex==index?'active':'']" v-for="(item,index) in panelsList" :key="item.panels_id" @mouseenter="panels(index)">
          <div class="scenic-cont">
            <h3>{{ item.name }}</h3>
            <h5>{{ item.title }}</h5>
            <span>&rarr;</span>
          </div>
          <img :src="require(`@/assets/images/${item.pic}`)" alt="">
        </div>
      </div>
    </div>
    <div class="share">
      <div class="title">
        <h2>精选游记</h2>
        <span></span>
      </div>
      <div class="share-box">
        <swiper :options="mesSwiper">
          <swiper-slide>
            <div class="share-left">
              <img src="../assets/images/message2.jpg" alt="">
            </div>
            <div class="share-right">
              <span></span>
              <p>
                秋风前夕，我们三人到狼峪抗战遗址瞻仰。 狼峪村不算大，隶属于旧街乡南沟村。 村里安安静静的，偶尔有小车出入。即将成熟的枣树果实累累，压弯了枝头。
                房屋的外墙和道边护墙都刷了灰色，还点缀着鲜红的五角星，昭示：这里是红色景区。
              </p>
              <p>
                登上草帽山仰望高高耸立着＂百团大战，光照千秋＂的纪念碑，我们心情凝重，抗日战争时期，这里曾是硝烟弥漫的战场，阻击战，破袭战是百团大战的组成部分，抗战将士们冒着枪林弹雨，出生入死，英勇战斗，顽强拼搏。范子侠将军和多位英雄就牺牲在这里。
              </p>
              <h6>—— 不知名驴友</h6>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="share-left">
              <img src="../assets/images/message2.jpg" alt="">
            </div>
            <div class="share-right">
              <span></span>
              <p>
                秋风前夕，我们三人到狼峪抗战遗址瞻仰。 狼峪村不算大，隶属于旧街乡南沟村。 村里安安静静的，偶尔有小车出入。即将成熟的枣树果实累累，压弯了枝头。
                房屋的外墙和道边护墙都刷了灰色，还点缀着鲜红的五角星，昭示：这里是红色景区。
              </p>
              <p>
                登上草帽山仰望高高耸立着＂百团大战，光照千秋＂的纪念碑，我们心情凝重，抗日战争时期，这里曾是硝烟弥漫的战场，阻击战，破袭战是百团大战的组成部分，抗战将士们冒着枪林弹雨，出生入死，英勇战斗，顽强拼搏。范子侠将军和多位英雄就牺牲在这里。
              </p>
              <h6>—— 不知名驴友</h6>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 手风琴
      panelsList: [],
      panelsIndex: 5,
      // 新闻选项卡
      newsIndex: 0,
      // 新闻轮播图
      newsSwiper: {
        autoplay: true, // 设置自动轮播
        pagination: {
          // 设置分页器
          el: '.swiper-pagination',
          clickable: true, // 设置点击可切换
          bulletClass: 'my-bullet', // 非激活状态的class
          bulletActiveClass: 'my-bullet-active' // 激活状态的class
        }
      },
      // 精选游记轮播图
      mesSwiper: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  created() {
    this.getPanels()
  },
  methods: {
    // 新闻选项卡
    newsTab(i) {
      this.newsIndex = i
    },
    // 手风琴图片数据
    getPanels() {
      this.$axios
        .get('/data/panels.json')
        .then((response) => {
          let { status, data } = response
          if (+status !== 200) return
          this.panelsList = data
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 手风琴选项卡
    panels(i) {
      this.panelsIndex = i
    }
  }
}
</script>

<style scoped>
/* 新闻模块 */
.banner {
  width: 100%;
  height: 55vh;
  background: url(../assets/images/banner1.png) no-repeat;
  background-size: cover;
}

.news {
  margin-top: 25px;
}
.news .news-box {
  display: flex;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
}
.news .news-box .news-left {
  width: 47.5%;
}
.news .news-box .news-right {
  width: 47.5%;
}
.news .news-box .news-right .news-title {
  line-height: 35px;
  border-bottom: 2px solid brown;
}
.news .news-box .news-right .news-title > h5 {
  display: inline-block;
  padding: 0 15px;
  font-size: 15px;
  cursor: pointer;
}
.news .news-box .news-right .news-title > a {
  float: right;
  font-size: 15px;
}
.news .news-box .news-right > ul {
  display: none;
  padding-top: 10px;
}
.news .news-box .news-right > ul li {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  border-bottom: 1px dashed #dddddd;
  cursor: pointer;
}
.news .news-box .news-right > ul li:hover p {
  color: brown;
  font-weight: bold;
}
.news .news-box .news-right > ul li span {
  display: inline-block;
  font-size: 14px;
  font-style: oblique;
}
.news .news-box .news-right > ul li p {
  width: 84%;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 景点模块 */
.scenic {
  margin-top: 5vw;
  padding: 1vw 0 4vw 0;
  box-shadow: 2px 2px 3px #eeeeee;
  background-color: #fff;
}
.scenic .scenic-box {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  height: 30vw;
  padding: 10px;
}
.scenic .scenic-box .panel {
  position: relative;
  flex: 1;
  min-width: 3vw;
  max-width: 35vw;
  background-color: #fff;
  transition: all 1s ease;
  transform-origin: left center;
  cursor: pointer;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px 2px 5px rgb(149, 149, 149);
}
.scenic .scenic-box .panel .scenic-cont {
  position: absolute;
  top: 75%;
  left: 0;
  width: 100%;
  height: 25%;
  padding-left: 10%;
  box-sizing: border-box;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.8s ease;
  color: #1f1f1f;
  background-color: rgba(255, 255, 255, 0.8);
}
.scenic .scenic-box .panel .scenic-cont h3 {
  max-width: 300px;
  font-size: 17px;
  padding: 1vw 0;
}
.scenic .scenic-box .panel .scenic-cont h5 {
  width: 300px;
  font-size: 15px;
  color: brown;
}
.scenic .scenic-box .panel .scenic-cont span {
  display: block;
  font-size: 25px;
  text-align: right;
  margin-right: 15%;
}
.scenic .scenic-box .panel img {
  height: 100%;
}
.scenic .scenic-box .panel:hover .scenic-cont,
.scenic .scenic-box .panel.active .scenic-cont {
  transform: translateY(0);
  opacity: 1;
}
.scenic .scenic-box .panel:hover {
  box-shadow: 2px 5px 10px #666;
}
.scenic .scenic-box .panel.active {
  flex: 5;
}
/* 游记分享模块 */
.share {
  max-width: 1160px;
  margin: 4vw auto;
}
.share .share-box {
  position: relative;
  margin: 0 auto;
}
.share .share-box > div {
  padding-left: 6%;
  height: 55vh;
}
.share .share-box .share-left {
  width: 50%;
  height: 90%;
}
.share .share-box .share-left img {
  width: 100%;
}
.share .share-box .share-right {
  position: absolute;
  top: 10%;
  left: 45%;
  width: 48%;
  height: 100%;
  background-color: #f6e2e2;
  box-shadow: 2px 2px 3px #ffe0e0;
  padding: 3vw 3vw 0;
}
.share .share-box .share-right span {
  display: block;
  position: absolute;
  top: 0;
  right: 10%;
  width: 7%;
  height: 7%;
  background: #d26868;
}
.share .share-box .share-right p {
  font-size: 14px;
  line-height: 26px;
  text-indent: 2em;
}
.share .share-box .share-right h6 {
  margin-top: 1vw;
  color: #d2391e;
  text-align: right;
  font-size: 15px;
}
.share .share-box .swiper-button-prev,
.share .share-box .swiper-button-next {
  color: brown;
}
.title {
  padding: 2vw 0;
}
.title h2 {
  padding-bottom: 7px;
  font-size: 20px;
  text-align: center;
}
.title span {
  display: block;
  width: 40px;
  height: 2px;
  background-color: #cc3636;
  margin: 0 auto;
}
/* 新闻选项卡 */
.activeTit {
  background-color: brown;
  color: #f5f5f5;
}
.activeCont {
  display: block !important;
}

/* 新闻轮播图小圆点 */
:deep(.my-bullet) {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border-radius: 50%;
  display: inline-block;
  background: #fff;
  cursor: pointer;
}
:deep(.my-bullet-active) {
  background: #e02e2e;
  opacity: 1;
}

/* 移动端样式 */
@media screen and (max-width: 767px) {
  .banner {
    height: 22vh;
  }
  .title h2 {
    font-size: 12rem;
  }
  /* 新闻 */
  .news .news-box {
    flex-direction: column;
  }
  .news .news-box .news-left {
    width: 80%;
    height: 33vh;
  }
  .news .news-box .news-right {
    width: 80%;
    margin: 0 auto;
  }
  .news .news-box .news-right .news-title {
    line-height: 8vw;
  }
  .news .news-box .news-right .news-title > h5 {
    font-size: 10rem;
  }
  .news .news-box .news-right .news-title > a {
    font-size: 10rem;
  }
  .news .news-box .news-right > ul li p {
    width: 80%;
    font-size: 9rem;
  }
  .news .news-box .news-right > ul li span {
    font-size: 8rem;
  }
  /* 景点 */
  .scenic {
    margin-top: 3vw;
  }
  .scenic .scenic-box {
    height: 60vw;
  }
  .scenic .scenic-box .panel {
    flex: 0.8;
    max-width: 80vw;
  }
  .scenic .scenic-box .panel .scenic-cont h3 {
    font-size: 12rem;
  }
  .scenic .scenic-box .panel .scenic-cont h5 {
    font-size: 10rem;
  }
  .scenic .scenic-box .panel .scenic-cont span {
    font-size: 15rem;
  }
  /* 游记 */
  .share .share-box .share-left {
    display: none;
  }
  .share .share-box .share-right {
    top: 5%;
    left: 5%;
    width: 85%;
    padding: 7vw 3vw 0;
  }

  .share .share-box .share-right p {
    font-size: 9rem;
  }
}

/* 平板端样式 */
@media screen and (min-width: 768px) and (max-width: 992px) {
  .banner {
    height: 35vh;
  }
  .scenic .scenic-box {
    height: 45vw;
  }

  .share .share-box .share-run > ul li .share-right p {
    line-height: 25px;
  }
}

/* 桌面端样式 */
@media screen and (min-width: 992px) {
  /* 在此处编写桌面端样式 */
}
</style>